<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ注册页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: none;
            box-sizing: border-box;
            list-style: none;
  
  
        }
        form{
            line-height: 40px;
            background-image: url(img/body.png);
            background-repeat: repeat-x;
            padding-left: 200px;
        }
    </style>
</head>
<body>
    <header><img src="img/bg_chs.png" alt="QQ注册" class="header" style="width:100%"></header>
    <form action="" method="POST" style="">
       <h2>注册账号</h2> 
       <table>
           <tr> <strong><label for="userName">昵称:</label> 
            <input type="text" id="userName" required pattern="^[-\w\u4E00-\u9FA5]{4,10}$">
             长度为4-10个字符</strong></tr> <br>
           <tr><strong>
               <label for="password">密码:</label>
               <input type="password" name="password" id="password" pattern="^[\dA-Za-z]{6,16}$" required>
               长度为6-16个字符
           </strong></tr> <br>
           <tr><strong>
            <label for="rePassword">确认密码:</label>
            <input type="password" name=rePassword" id="rePassword" pattern="^[\dA-Za-z]{6,16}$" required>
            长度为6-16个字符
        </strong></tr><br>
        <tr><strong>
            <label for="phone">手机号码:</label>
            <input type="text" name=phone" id="phoen" pattern="^1[3578]\d{9}$" required>
            号码长度为11位,以13|5|7|8开头
        </strong></tr><br>
        <tr> <strong><label for="email">邮箱:</label> 
            <input type="email" id="email" required>
        </strong></tr> <br>
        <tr> <strong><label for="age">邮箱:</label> 
            <input type="email" id="age" pattern="^\d|[1-9]\d|1[0-2]\d$" required>
        </strong></tr> <br>
        <tr>
            <img src="img/btn.bmp" alt="">
        </tr>
       </table>
    </form>
</body>
</html>